---
title: Etiket
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

Komponent om visueel inhoud te kategoriseer of te merk.

<Tabs>

<Tab title="Usage">

```jsx
import { Tag } from "@/ui/display/tag/components/Tag";

export const MyComponent = () => {
  return (
    <Tag
      className
      color="red"
      text="Urgent"
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Eienskappe | Tipe    | Beskrywing                                                                                                                                                   |
| ---------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| klasNaam   | string  | Opsionele naam vir bykomende styl                                                                                                                            |
| kleur      | string  | Kleur van die etiket. Opsies sluit in: `groen`, `turkoois`, `lug`, `blou`, `pers`, `pienk`, `rooi`, `oranje`, `geel`, `grys` |
| teks       | string  | Die inhoud van die etiket                                                                                                                                    |
| onClick    | funksie | Opsionele funksie wat geroep word wanneer 'n gebruiker op die etiket klik                                                                                    |

</Tab>

</Tabs>
